<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>实物商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
      <el-row :gutter="20">
        <el-col :span="5">

          <el-select v-model="commoditystatus" placeholder="请选择商品状态" >
            <el-option label="已上架" value="1"></el-option>
            <el-option label="未上架" value="0"></el-option>
          </el-select>
        </el-col>

        <el-col :span="8">
            <div class="block">
              <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  @change="getTime"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
        </el-col>

        <el-col :span="4">
          <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
            <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
          </el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="clearAllsearch">重置</el-button>
        </el-col>

      </el-row>

    </el-card>

    <el-card style="margin-top: 30px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="readyAdd">添加商品</el-button>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="readyStandard">编辑商品规格</el-button>
        </el-col>

      </el-row>

      <el-table :data="commodityList" border stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column label="商品封面">
          <template slot-scope="scope">
            <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
          </template>

        </el-table-column>

        <el-table-column label="商品名称" prop="commodityname"></el-table-column>
        <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
        <el-table-column label="销售量" prop="salecounts"></el-table-column>
        <el-table-column label="商品状态" prop="commoditystatus">
          <template slot-scope="s">
<!--            <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>-->
            <b style="color:#3cb371" v-show="s.row.commoditystatus==1">{{caseStatusArr[1]}}</b>
            <b style="color:#ff0000" v-show="s.row.commoditystatus==0">{{caseStatusArr[0]}}</b>
          </template>
        </el-table-column>
        <el-table-column label="上架时间" prop="salestarttime"></el-table-column>
        <el-table-column label="排序号" prop="commodityorder"></el-table-column>

        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="shotDialog(scope.row.id)">状态</el-button>
            <el-button type="danger" size="mini" @click="removeCommodityById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[4, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <div>
      <!--添加菜单-->
      <el-dialog title="添加商品" :visible.sync="addCommodityFormVisible"  @close="closeDialog">
        <el-form
            :model="addCommodityForm"
            :rules="addCommodityFormRules"
            ref="addCommodityFormRef"
            label-width="150px"
            label-position="right"
            size="small"
            class="demo-ruleForm"
        >
          <el-form-item label="商品名称" prop="commodityname">
            <el-input v-model="addCommodityForm.commodityname"></el-input>
          </el-form-item>

          <el-form-item label="商品封面" prop="">
            <el-input type="hidden" v-model="addCommodityForm.commoditycover"></el-input>
            <el-upload
                class="avatar-uploader"
                :action="url1"
                :show-file-list="false"
                name="commoditycover"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload1">
              <img v-if="imageUrl1" :src="imageUrl1" class="avata">
              <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="轮播图" prop="">

            <el-input type="hidden" v-model="addCommodityForm.commodityrotation"></el-input>

            <el-upload
                class="avatar-uploader"
                :action="url"
                :show-file-list="false"
                name="commodityrotation"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
            </el-upload>

          </el-form-item>


          <el-form-item label="商品类别" prop="">
            <div class="block">
              <el-cascader
                  v-model="Type"
                  :options="Typeoptions"
                  @change="typeChange"></el-cascader>
            </div>
          </el-form-item>

          <!--       <el-form-item label="商品类别" prop="">
                    <el-select v-model="addCommodityForm.commoditytype" multiple placeholder="请选择类别">
                      <el-option :label="item.commoditytypename" :value="item.id" v-for="item in commodityTypeList" :key="item.id"></el-option>
                    </el-select>
                  </el-form-item>-->

          <!--

                  <el-form-item label="是否可抵用折扣" prop="locked">
                    <el-select v-model="addCommodityForm.commoditydeduct" placeholder="请选择是否锁定账户">
                      <el-option label="否" value="0"></el-option>
                      <el-option label="是" value="1"></el-option>
                    </el-select>
                  </el-form-item>
          -->

          <el-form-item label="商品描述" prop="livedescribe">
            <el-input v-model="addCommodityForm.livedescribe"></el-input>
          </el-form-item>

          <el-form-item label="商品价格" prop="commodityprice">
            <el-input v-model="addCommodityForm.commodityprice"></el-input>
          </el-form-item>

          <el-form-item label="商品划线价格" prop="commodityfakeprice">
            <el-input v-model="addCommodityForm.commodityfakeprice"></el-input>
          </el-form-item>

          <el-form-item label="商品销售量" prop="">
            <el-input v-model="addCommodityForm.salecounts"></el-input>
          </el-form-item>


          <el-form-item label="是否可抵用折扣" prop="commoditydeduct">
            <el-radio v-model="addCommodityForm.commoditydeduct" :label="1">是</el-radio>
            <el-radio v-model="addCommodityForm.commoditydeduct" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="是否上架" prop="commoditystatus">
            <el-radio v-model="addCommodityForm.commoditystatus" :label="1">是</el-radio>
            <el-radio v-model="addCommodityForm.commoditystatus" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="排序号" prop="commodityorder">
            <el-input v-model="addCommodityForm.commodityorder"></el-input>
          </el-form-item>

          <el-form-item label="选择规格" prop="">
            <el-select v-model="standarColor" placeholder="请选择颜色">
              <el-option :label="item" :value="item" v-for="item in newcolorArr"></el-option>
            </el-select>

            <el-select v-model="standarSize" placeholder="请选择尺寸" @change="searchStandardId">
              <el-option :label="item" :value="item" v-for="item in newsizeArr"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCommodity">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </span>

      </el-dialog>
    </div>


    <div>
      <!--修改菜单-->
      <el-dialog title="修改商品" :visible.sync="editCommodityFormVisible" @close="closeEditDialog">
        <el-form
            :model="editCommodityForm"
            :rules="editCommodityFormRules"
            ref="editCommodityFormRef"
            label-width="150px"
            label-position="right"
            size="small"
            class="demo-ruleForm"
        >
          <el-form-item label="商品名称" prop="commodityname">
            <el-input v-model="editCommodityForm.commodityname"></el-input>
          </el-form-item>

          <el-form-item label="商品封面" prop="">
            <el-input type="hidden" v-model="editCommodityForm.commoditycover"></el-input>
            <el-upload
                class="avatar-uploader"
                :action="url2"
                :show-file-list="false"
                name="commoditycover"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload2">
              <img v-if="imageUrl2" :src="imageUrl2" class="avata">
              <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>

            </el-upload>
          </el-form-item>

          <el-form-item label="轮播图" prop="">

            <el-input type="hidden" v-model="editCommodityForm.commodityrotation"></el-input>

            <el-upload
                class="avatar-uploader"
                :action="url3"
                :show-file-list="false"
                name="commodityrotation"
                :on-success="handleAvatarSuccess3"
                :before-upload="beforeAvatarUpload3">
              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>

            </el-upload>

          </el-form-item>


          <el-form-item label="商品类别" prop="">
            <div class="block">
              <el-cascader
                  :key="modalKey"
                  v-model="Type"
                  :options="Typeoptions"
                  @change="typeChange1"></el-cascader>
            </div>
          </el-form-item>


          <el-form-item label="商品描述" prop="livedescribe">
            <el-input v-model="editCommodityForm.livedescribe"></el-input>
          </el-form-item>

          <el-form-item label="商品价格" prop="commodityprice">
            <el-input v-model="editCommodityForm.commodityprice"></el-input>
          </el-form-item>

          <el-form-item label="商品划线价格" prop="commodityfakeprice">
            <el-input v-model="editCommodityForm.commodityfakeprice"></el-input>
          </el-form-item>

          <el-form-item label="商品销售量" prop="">
            <el-input v-model="editCommodityForm.salecounts"></el-input>
          </el-form-item>


          <el-form-item label="是否可抵用折扣" prop="commoditydeduct">
            <el-radio v-model="editCommodityForm.commoditydeduct" :label="1">是</el-radio>
            <el-radio v-model="editCommodityForm.commoditydeduct" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="是否上架" prop="commoditystatus">
            <el-radio v-model="editCommodityForm.commoditystatus" :label="1">是</el-radio>
            <el-radio v-model="editCommodityForm.commoditystatus" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item label="排序号" prop="commodityorder">
            <el-input v-model="editCommodityForm.commodityorder"></el-input>
          </el-form-item>

          <el-form-item label="选择规格" prop="">
            <el-select v-model="standarColor" placeholder="请选择颜色">
              <el-option :label="item" :value="item" v-for="item in newcolorArr"></el-option>
            </el-select>

            <el-select v-model="standarSize" placeholder="请选择尺寸" @change="searchStandardId1">
              <el-option :label="item" :value="item" v-for="item in newsizeArr"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editCommodity">确 定</el-button>
        <el-button @click="closeEditDialog">取 消</el-button>
      </span>

      </el-dialog>
    </div>

    <div>
            <!-- 规格列表-->
      <el-dialog title="编辑耳机商品规格" :visible.sync="standardCommodityFormVisible" @close="closeStandardDialog">

        <el-form
            :inline="true"
            :model="addstandardCommodityForm"
            :rules="addstandardCommodityFormRules"
            ref="addstandardCommodityFormRef"
            label-width="150px"
            label-position="right"
            size="small"
            class="demo-ruleForm  demo-form-inline"

        >

          <el-form-item label="规格颜色" prop="commoditycolor">
            <el-input v-model="addstandardCommodityForm.commoditycolor"></el-input>
          </el-form-item>

          <el-form-item label="规格尺寸" prop="commoditysize">
            <el-input v-model="addstandardCommodityForm.commoditysize"></el-input>
          </el-form-item>

          <el-button size="mini" type="primary" @click="addstandardCommodity">添加</el-button>
        </el-form>


      <el-card style="margin-top: 30px">
        <el-table


            :data="standarList" border stripe>

          <el-table-column type="index"></el-table-column>
          <el-table-column label="颜色" prop="commoditycolor"></el-table-column>
          <el-table-column label="尺寸" prop="commoditysize"></el-table-column>


          <el-table-column label="操作" width="250px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="showEditStandardDialog(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="removeStandardCommodityById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
      </el-dialog>


      <!--编辑规格-->
      <el-dialog title="编辑商品规格" :visible.sync="editStandardCommodityFormVisible" @close="closeEditStandardDialog">
        <el-form
            :model="standardCommodityForm"
            :rules="standardCommodityFormRules"
            ref="standardCommodityFormRef"
            label-width="150px"
            label-position="right"
            size="small"
            class="demo-ruleForm"
        >
          <el-form-item label="耳机颜色" prop="commoditycolor">
            <el-input v-model="standardCommodityForm.commoditycolor"></el-input>
          </el-form-item>

          <el-form-item label="耳机尺寸" prop="commoditysize">
            <el-input v-model="standardCommodityForm.commoditysize"></el-input>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editStandardCommodity">确 定</el-button>
        <el-button @click="closeEditStandardDialog">取 消</el-button>
      </span>

      </el-dialog>
    </div>


  </div>
</template>
<script>
export default {
  data() {
    return {

      caseStatusArr:{
        1:"已上架",
        0:"未上架",
      },
      pageNum: 1,
      pageSize: 4,
      value1: [],
      time1:null,
      time2:null,
      commodityList: [],
      commodityTypeList: [],
      standarList: [], //规格里所有对象
      standarColorList: [], //系规格里所有对象颜色
      standarSizeList: [], //系规格里所有对象尺寸
      newcolorArr: [],//系规格里去重颜色
      newsizeArr: [],//系规格里去重尺寸
      standarColor: '',
      standarSize: '',
      total: 9,
      iurl: this.$MyUrl.imgUrl+'commodity/',//图片地址
      imageUrl1: "",//组件选中图片反显需要
      imageUrl: "",//组件选中图片反显需要

      imageUrl2: "",//组件选中图片反显需要
      imageUrl3: "",//组件选中图片反显需要
      url: this.$MyUrl.serverUrl + 'commodity/upload',//添加封面上传地址
      url1: this.$MyUrl.serverUrl + 'commodity/upload1',//添加轮播图上传地址

      url2: this.$MyUrl.serverUrl + 'commodity/upload2',//修改封面上传地址
      url3: this.$MyUrl.serverUrl + 'commodity/upload3',//修改轮播图上传地址
      commodityname: "",
      commoditystatus: "",
      standardCommodityFormVisible: false,
      editStandardCommodityFormVisible: false,
      addCommodityFormVisible: false,
      addCommodityForm: {
        commodityname: "",
        commoditycover: "",
        commodityrotation: "",
        commoditytype: "",
        livedescribe: "",
        commodityprice: "",
        commodityfakeprice: "",
        salecounts: "",
        commoditydeduct: 0,
        commoditystatus: 1,
        salestarttime: "",
        commodityorder: "",
        commoditystandardsid: "",
      },
      addCommodityFormRules: {
        commodityname: [
          {required: true, message: "請輸入商品名称", trigger: "blur"},
          {min: 2, max: 16, message: "商品名称必须是2-16个字符", trigger: "blur"}
        ],
        livedescribe: [
          {required: true, message: "請輸入商品描述", trigger: "blur"},
          {min: 1, max: 40, message: "内容长度在1-40個字符之間", trigger: "blur"}
        ],
        commodityprice: [
          {required: true, message: "請輸入商品价格", trigger: "blur"},
        ],
        commodityfakeprice: [
          {required: true, message: "請輸入商品划线价格", trigger: "blur"},
        ],
        // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
        commoditystatus: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commoditydeduct: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commodityorder: [
          {required: true, message: "請輸入排序号", trigger: "blur"},
        ]
      },
      Type: [],
      modalKey: 0,
      Typeoptions: [{
        value: -1,
        label: '电子类',
        children: [{
          value: 3,
          label: '耳机',
        }, {
          value: 4,
          label: '平板',
        }]
      }, {
        value: -2,
        label: '书籍类',
        children: [{
          value: 5,
          label: '西班牙语教材',
        }, {
          value: 6,
          label: '日语教材',
        }]
      }],
      addstandardCommodityForm: {
        commoditycolor: "",
        commoditysize: "",
      },
      addstandardCommodityFormRules: {
        commoditycolor: [
          {required: true, message: "請輸入商品颜色", trigger: "blur"},
        ],
        commoditysize: [
          {required: true, message: "請輸入商品规格", trigger: "blur"},

        ]
      },
      standardCommodityForm: {
        commoditycolor: "",
        commoditysize: "",
      },
      standardCommodityFormRules: {
        commoditycolor: [
          {required: true, message: "請輸入商品颜色", trigger: "blur"},
        ],
        commoditysize: [
          {required: true, message: "請輸入商品规格", trigger: "blur"},

        ]
      },
      editCommodityFormVisible: false,
      editCommodityForm: {
        commodityname: "",
        commoditycover: "",
        commodityrotation: "",
        commoditytype: "",
        livedescribe: "",
        commodityprice: "",
        commodityfakeprice: "",
        salecounts: "",
        commoditydeduct: 0,
        commoditystatus: 1,
        salestarttime: "",
        commodityorder: "",
        commoditystandardsid: "",
      },
      editCommodityFormRules: {
        commodityname: [
          {required: true, message: "請輸入商品名称", trigger: "blur"},
          {min: 2, max: 16, message: "商品名称必须是2-16个字符", trigger: "blur"}
        ],
        livedescribe: [
          {required: true, message: "請輸入商品描述", trigger: "blur"},
          {min: 1, max: 40, message: "内容长度在1-40個字符之間", trigger: "blur"}
        ],
        commodityprice: [
          {required: true, message: "請輸入商品价格", trigger: "blur"},
        ],
        commodityfakeprice: [
          {required: true, message: "請輸入商品划线价格", trigger: "blur"},
        ],
        // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
        commoditystatus: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commoditydeduct: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commodityorder: [
          {required: true, message: "請輸入排序号", trigger: "blur"},
        ]
      },
    };
  },
  methods: {


    clearAllsearch(){
      this.value1=[];
      this.time1=null;
      this.time2=null;
      this.commoditystatus='';
    },

    //添加规格
    addstandardCommodity() {
      this.$refs.addstandardCommodityFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "commodityStandards/add"
        this.$axios.post(url, this.addstandardCommodityForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.getStandard();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },
    //修改规格
    editStandardCommodity(){
      this.$refs.standardCommodityFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "commodityStandards/edit"
        this.$axios.put(url, this.standardCommodityForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.editStandardCommodityFormVisible = false;
            this.getStandard();
            //this.readyStandard();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },
    //删除规格
    removeStandardCommodityById(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url ="commodityStandards/del/"+id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.getStandard();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //查询规格列表
    getStandard(){
      let url = "commodityStandards/cslist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.standarList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    //显示单条修改规格窗口
    showEditStandardDialog(row){
      this.editStandardCommodityFormVisible = true;
      this.standardCommodityForm = row;
    },
    //关闭单条修改规格窗口
    closeEditStandardDialog(){
      this.editStandardCommodityFormVisible = false;
    },
    //关闭编辑规格窗口
    closeStandardDialog(){
      this.standardCommodityFormVisible = false;
      this.$refs.addstandardCommodityFormRef.resetFields();
    },

    //打开编辑规格窗口
    readyStandard(){
      this.standardCommodityFormVisible = true;
    },

    //打开添加窗口
    readyAdd() {
      this.addCommodityFormVisible = true;
    },

    closeDialog() {
      this.addCommodityFormVisible = false;
      this.$refs.addCommodityFormRef.resetFields();
    },
    closeEditDialog() {
      this.editCommodityFormVisible = false;
      this.$refs.editCommodityFormRef.resetFields();
      this.Type = [];
    },
    //添加给商品类别赋值
    typeChange() {
      this.addCommodityForm.commoditytype = this.Type[this.Type.length - 1];
    },
    //修改给商品类别赋值
    typeChange1() {
      this.editCommodityForm.commoditytype = this.Type[this.Type.length - 1];
    },
    //添加封面图
    handleAvatarSuccess1(res, file) {
      this.imageUrl1 = URL.createObjectURL(file.raw);
      this.addCommodityForm.commoditycover = res.data;
    },
    //添加封面图
    beforeAvatarUpload1(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //添加轮播图
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addCommodityForm.commodityrotation = res.data;
    },
    //添加轮播图
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //修改封面图
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.editCommodityForm.commoditycover = res.data;
      this.imageUrl2 = this.$MyUrl.imgUrl+'commodity/'+this.editCommodityForm.commoditycover;
    },
    //修改封面图
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //修改轮播图
    handleAvatarSuccess3(res, file) {
      this.imageUrl3 = URL.createObjectURL(file.raw);
      this.editCommodityForm.commodityrotation = res.data;
      this.imageUrl3 = this.$MyUrl.imgUrl+'commodity/'+this.editCommodityForm.commodityrotation;
    },
    //修改轮播图
    beforeAvatarUpload3(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },




    getCommodityTypeList() {
      let url = "commodityType/tlist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.commodityTypeList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },

    //打开编辑窗口
    showEditDialog(row) {
      this.editCommodityFormVisible = true;
      this.editCommodityForm = row;

      //编辑图片反显
      this.imageUrl2 = this.iurl+this.editCommodityForm.commoditycover;
      this.imageUrl3 = this.iurl+this.editCommodityForm.commodityrotation;


      this.getInfo();
      this.getCommodityTypeList();
      this.showCommodityStandardList();
    },
    editCommodity() {
      this.$refs.editCommodityFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "commodity/edit"
        this.$axios.put(url, this.editCommodityForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.editCommodityFormVisible = false;
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },
    getInfo() {
      let son = this.editCommodityForm.commoditytype;
      let url = "commodityType/fatherId";
      this.$axios.get(url, {
        params: {
          son: son
        }
      }).then(res => {
        if (res.data.code == 200) {
          let father = res.data.data;

          this.Type.push(father);
          this.Type.push(son)
          console.log(this.Type + "=======反显类别=========")

          this.modalKey++;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    showCommodityStandardList() {
      let url = "commodityStandards/cslist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.standarList = res.data.data;
          let arr = this.standarList
          for (let i = 0; i < arr.length; i++) {

            if(arr[i].id == this.editCommodityForm.commoditystandardsid){
              this.standarColor = arr[i].commoditycolor;
              this.standarSize = arr[i].commoditysize;
              console.log(this.standarColor+"=====反显规格======"+this.standarSize);
            }
          }
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    //下架
    shotDialog(id){
      this.$confirm('是否更改该商品的上下架状态?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        let url ="commodity/down/"+id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消状态更改'
        });
      });
    },

    //删除
    removeCommodityById(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url ="commodity/del/"+id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加
    addCommodity() {
      this.$refs.addCommodityFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "commodity/add"
        this.$axios.post(url, this.addCommodityForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.addCommodityFormVisible = false;
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },


    getTime() {
      this.time1=this.value1[0];
      this.time2=this.value1[1];
      //alert(this.time1+'-----'+this.time2)
    },
    //根据名字查列表
    getCommodityList() {
      let url = "commodity/clist";
      this.$axios.get(url, {
        params: {

          time1:this.time1,
          time2:this.time2,
          status: this.commoditystatus,
          name: this.commodityname,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.commodityList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },


    //添加---找出选择的规格id，给商品对象属性赋值
    searchStandardId() {
      let color = this.standarColor;
      let size = this.standarSize;
      let colorArr = this.standarList
      for (let i = 0; i < colorArr.length; i++) {
        if (color == colorArr[i].commoditycolor) {
          if (size == colorArr[i].commoditysize) {
            this.addCommodityForm.commoditystandardsid = colorArr[i].id;
          }
        }
      }
    },
//修改---找出选择的规格id，给商品对象属性赋值
    searchStandardId1() {
      let color = this.standarColor;
      let size = this.standarSize;
      let colorArr = this.standarList
      for (let i = 0; i < colorArr.length; i++) {
        if (color == colorArr[i].commoditycolor) {
          if (size == colorArr[i].commoditysize) {
            this.editCommodityForm.commoditystandardsid = colorArr[i].id;
          }
        }
      }
    },

    //规格对象循环打印
    getStandarList() {
      let url = "commodityStandards/cslist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.standarList = res.data.data;
          let arr = this.standarList
          //颜色数组去重
          let colorArr = this.standarColorList
          for (let i = 0; i < arr.length; i++) {
            colorArr.push(arr[i].commoditycolor);
          }
          this.newcolorArr = colorArr.filter((item, index, colorArr) => {
            return colorArr.indexOf(item, 0) === index;
          });
          console.log("去重后：" + this.newcolorArr);

          //尺寸数组去重
          let sizeArr = this.standarSizeList
          for (let i = 0; i < arr.length; i++) {
            sizeArr.push(arr[i].commoditysize);
          }
          this.newsizeArr = sizeArr.filter((item, index, sizeArr) => {
            return sizeArr.indexOf(item, 0) === index;
          });
          console.log("去重后：" + this.newsizeArr);

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    searchCommodity() {
      this.pageNum = 1;
      this.getCommodityList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCommodityList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCommodityList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },

    reloadData() {
      this.searchCommodity();
      this.getStandarList();
      this.getCommodityTypeList();
      //this.getRoleList();
      // this.getUserList()
    }
  },
  created() {
    this.reloadData();

  }
};
</script>
<style lang="less" scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avata {
  width: 178px;
  height: 178px;
  display: block;
}
</style>